<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* common style */
  .list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }
  .list .item {
    list-style-type: none;
    width: 200px;
  }
  .list .item h5 {
    color: #333;
    border: 1px solid #eee;
    background: #f9f9f9;
    height: 36px;
    align-content: center;
    padding: 10px 0;
    margin: 0;
    margin-bottom: 10px;
    padding: 8px;
  }
  .list .item .wrap {
    height: 200px;
  }
  .list .item textarea {
    box-sizing: border-box;
    width: 100%;
    height: 160px;
    border: 0;
    padding: 0;
    background: #f9f9f9;
    border: 1px solid #eee;
    margin-top: 10px;
    color: #666;
    font-size: 12px;
  }
  .list .item textarea::-webkit-scrollbar {
    width: 8px;
  }
  .list .item textarea::-webkit-scrollbar-thumb {
    background-color: #eee;
    border: 2px solid #f5f5f5;
  }
  .list .item .wrap .parent {
    background: #e6faff;
    border: 1px solid #0992ee;
  }
  .list .item .wrap .parent .child {
    background: #42b883;
    color: #fff;
  }
  /* parent1 child1 */
  .list .item .wrap .parent1 {
    position: relative;
  }
  .list .item .wrap .parent .child1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /* parent2 child2 */
  .list .item .wrap .parent2 {
    position: relative;
  }
  .list .item .wrap .parent .child2 {
    position: absolute;
    inset: 0;
    margin: auto;
  }
  /* parent3 child3 */
  .list .item .wrap .parent3 {
    position: relative;
  }
  .list .item .wrap .parent .child3 {
    position: absolute;
    inset: 0;
    margin:auto;
    width: fit-content;
    height: fit-content;
    min-width: 100px;
    min-height: 100px;
  }
  /* parent4 child4 */
  .list .item .wrap .parent4 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* parent5 child5 */
  .list .item .wrap .parent5 {
    display: grid;
    place-content: center;
    place-items: center;
  }
  /* parent6 child6 */
  .list .item .wrap .parent6 {
    display: flex;
  }
  .list .item .wrap .child6 {
    margin: auto;
  }
</style>
<body>
  <h3 style="color: #333;">元素居中的几种方式</h3>
  <hr style="border-width: 0px; border-bottom: 1px solid #ccc;"/>

  <ul class="list">
    <li class="item">
      <h5>absolute + translate</h5>
      <div class="wrap">
        <div class="parent parent1" title="parent1" style="height: 200px;">
          <div class="child child1" title="child1" style="width: 100px; height: 100px; line-height:100px; text-align:center;">child1</div>
        </div>
      </div>
      <textarea readonly>
  .parent1 { 
    position: relative; 
  }

  .child1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
      </textarea>
    </li>
    
    <li class="item">
      <h5>absolute + inset + margin</h5>
      <div class="wrap">
        <div class="parent parent2" title="parent2" style="height: 200px;">
          <div class="child child2" title="child2" style="width: 100px; height: 100px; line-height:100px; text-align:center;">child2</div>
        </div>
      </div>
      <textarea readonly>
  .parent2 { 
    position: relative; 
  }

  .child2 {
    position: absolute;
    /* left,top,right,bootom 0 */
    inset: 0;
    margin: auto;
  }
      </textarea>
    </li>

    <li class="item">
      <h5>absolute + inset + margin + fit-content</h5>
      <div class="wrap">
        <div class="parent parent3" title="parent3" style="height: 200px;">
          <div class="child child3" title="child3" style="text-align: center; line-height: 100px;">child3</div>
        </div>
      </div>
      <textarea readonly>
  .parent3 { 
    position: relative; 
  }

  .child3 {
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    min-width: 100px;
    min-height: 100px;
  }
      </textarea>
    </li>

    <li class="item">
      <h5>flex + justify-content + align-items</h5>
      <div class="wrap">
        <div class="parent parent4" title="parent4" style="height: 200px;">
          <div class="child child4" title="child4" style="width: 100px; height: 100px; line-height:100px; text-align:center;">child4</div>
        </div>
      </div>
      <textarea readonly>
  .parent4 { 
    display: flex;
    align-items: center;
    justify-content: center;
  }
      </textarea>
    </li>

    <li class="item">
      <h5>grid + place-content + place-items</h5>
      <div class="wrap">
        <div class="parent parent5" title="parent5" style="height: 200px;">
          <div class="child child5" title="child5" style="width: 100px; height: 100px; line-height:100px;text-align: center;">child5</div>
        </div>
      </div>
      <textarea readonly>
  .parent5 { 
    display: grid;
    place-content: center;
    place-items: center;
  }
      </textarea>
    </li>

    <li class="item">
      <h5>flex + margin</h5>
      <div class="wrap">
        <div class="parent parent6" title="parent6" style="height: 200px;">
          <div class="child child6" title="child6" style="width: 100px; height: 100px; line-height:100px;text-align: center;">child6</div>
        </div>
      </div>
      <textarea readonly>
  .parent6 { 
    display: flex;
  }
  .child6 { 
    margin: auto;
  }
      </textarea>
    </li>
  </ul>
</body>
</html>
